<!doctype html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<meta name="format-detection" content="telephone=no, address=no, email=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="x5-orientation" content="portrait">
	<title>数据统计</title>
	<script src="js/rem.js"></script>
	<link href="lib/weui/weui.min.css" rel="stylesheet">
	<link href="css/reset.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<style>
		
	</style> 
</head>
<body>
<div class="small_page">
	<!--头部 -->
	<div class="small_head whitehd" style="background:#fb7d52;">
		<div class="go-back"></div>
		<div class="head-title">数据统计</div>
		<div class="tool-box"><img src="images/amore2.png" style="width:.4rem;"></div>
	</div>
	<!--底部 导航-->
	<!--<div class="small_foot">
		<div class="weui-flex in-align flex-btn">
			<a class="weui-flex__item active" href="index.html">
				<img src="images/foot11.png">
				<p>首页</p>
			</a>
			<a class="weui-flex__item" href="首页.html">
				<img src="images/foot2.png">
				<p>粉丝</p>
			</a>
			<div class="weui-flex__item">
				<div class="sao-btn">
					<img src="images/sao00.png">
				</div>
			</div>
			<a class="weui-flex__item" href="排行榜.html">
				<img src="images/foot3.png">
				<p>排行榜</p>
			</a>
			<a class="weui-flex__item" href="#">
				<img src="images/foot4.png">
				<p>我的</p>
			</a>
		</div>
	</div> -->
	
	<!--页面主体 -->
	<div class="small_body">
		<div class="warp-pages">
			<div class="data-hd">
				<div class="data-title">本月完成<span>(元)</span></div>
				<div class="data-num"><span class="numberRun">3870</span></div>
				<div class="data-title">本月任务<span>(元)</span></div>
				<div class="data-num2">5000</div>
			</div>
			<div class="data-box">
				<div class="weui-flex data-flex">
					<div class="weui-flex__item">
						<span>昨日</span>
						<p>392</p>
						<div class="data-ss">较前日<span class="top"></span>18%</div>
					</div>
					<div class="weui-flex__item">
						<span>上周</span>
						<p>1280</p>
						<div class="data-ss">较上周<span class="top"></span>18%</div>
					</div>
					<div class="weui-flex__item">
						<span>上月</span>
						<p>4600</p>
						<div class="data-ss">较上月<span class="down"></span>18%</div>
					</div>
				</div>
				<div class="weui-cells no-end tit-cells">
					<div class="weui-cell">
						<div class="weui-cell__bd"><span class="title-b">业绩统计</span></div>
						<div class="weui-cell__ft">
							<span class="btn-tab btn-blue">上周</span>
							<span class="btn-tab">上月</span>
						</div>
					</div>
				</div>
				<div class="biao-box" style="width:100%; height:4.2rem;">
					<div id="main" style="width: 300px;height:240px;"></div>
				</div>
			</div>
		</div>
	</div>
	
	
</div>

</body>
<script src="lib/jquery/jquery-1.10.1.min.js"></script>
<script src="js/numberAnimate.js"></script>
<script src="lib/echarts/echarts.common.min.js"></script>
<script>
$(function(){
		
	//初始化  .numberAnimate({num:'36585',/* 数值 */ dot:2,/* 小数点几位 */ speed:2000/* 滑动速度 */, symbol:"," /* 分割符号*/});
  var numRun = $(".numberRun").numberAnimate({num:'3655', speed:2000,});
  var nums = 3655
  setInterval(function(){
    nums+= 4;
    numRun.resetData(nums);
  },3000);	
  
})

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));



data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];

var dateList = data.map(function (item) {
    return item[0];
});
var valueList = data.map(function (item) {
    return item[1];
});

option = {

    // Make gradient line here
    visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400
    }],
    title: [{
        left: 'center',
        text: ''
    }],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        data: dateList
    }, {
        data: dateList,
        gridIndex: 1
    }],
    yAxis: [{
        splitLine: {show: false}
    }, {
        splitLine: {show: false},
        gridIndex: 1
    }],
    grid: [{
        bottom: '30%'
    }, {
        top: '60%'
    }],
    series: [{
        type: 'line',
        showSymbol: false,
        data: valueList
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>

</html>